<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Html5 Lesson 01 (Web Storage)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
        body {
            font: 100% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
            margin: 0;
        }

        #log {
            background-color: gray;
            color: white;
            padding: 10px;
            margin-left: 20px;
            display: inline-block;
        }

        header {
            background: #FFCC99;
            color: white;
            -moz-box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .5), 0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;
            -webkit-box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .5), 0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;
            box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .5), 0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;
            text-shadow: 1px 1px 1px #444;
        }

        header h1, header h2 {
            display: inline-block;
            padding: 12px 15px;
            font-size: 105%;
            line-height: 1;
            margin: 0;
        }

        header h1 {
            background: #FF9966;
        }

        .arrow-right {
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 18px solid transparent;
            border-bottom: 18px solid transparent;
            border-left: 18px solid #FF9966;
            margin-bottom: -11px;
        }

        #content,#content1 {
            padding: 20px;
            color: #333;
        }

        input, textarea {
            font-size: 100%;
        }
    </style>
</head>
<body>
<header>
    <h1>本地存储</h1>
    <div class="arrow-right"></div>
    <h2>永久存储textarea里的数据</h2>
</header>
<div id="content"></div>
<p id="log"></p>
<script>
    // Generate the little markup from javascript
    var area = document.createElement('textarea');
    area.style.width = '300px';
    area.style.height = '150px';
    document.querySelector('#content').appendChild(area);

    // place content from previous edit
    if (!area.value) {
        area.value = window.localStorage.getItem('value');
    }

    // your content will be saved locally
    area.addEventListener('keyup', function () {
        window.localStorage.setItem('value', area.value);
        window.localStorage.setItem('timestamp', (new Date()).getTime());
    }, false);

    updateLog();
    setInterval(updateLog, 5000); // show time every 5 seconds

    function updateLog() {
        var delta = 0;
        if (window.localStorage.getItem('value')) {
            delta = ((new Date()).getTime() - (new Date()).setTime(window.localStorage.getItem('timestamp'))) / 1000;
            document.querySelector("#log").innerHTML = '最近存储: ' + delta + '秒以前';
        }
        else {
            area.value = '输入数据进行存储';
        }
    }
</script>
<header>
    <h1>会话存储</h1>
    <div class="arrow-right"></div>
    <h2>存储textarea1里的数据，关闭浏览器丢失</h2>
</header>
<div id="content1"></div>
<p id="log1"></p>
<script>
    // Generate the little markup from javascript
    var area1 = document.createElement('textarea');
    area1.style.width = '300px';
    area1.style.height = '150px';
    document.querySelector('#content1').appendChild(area1);

    // place content from previous edit
    if (!area1.value) {
        area1.value = sessionStorage['value'];
    }

    // your content will be saved locally
    area1.addEventListener('keyup', function () {
        sessionStorage['value'] = area1.value;
    }, false);

    updateLog();
    setInterval(updateLog, 5000); // show time every 5 seconds

    function updateLog() {
        var delta = 0;
        if (!sessionStorage['value']) {
            area1.value = '输入数据进行存储，关闭浏览器丢失';
        }
    }
</script>
</body>
</html>